<template>
    <div>
        用户名:<input type="text" name="" id="" v-model='username'>
        <br>
        密码: <input type="password" v-model='password'>

        <drag-verify
            :width='width'
            :height='height'
            :text = 'text'
            ref = 'Verify'
        >

        </drag-verify>

        <button @click='submit'>提交</button>

        <img :src="src" alt="" @click='ding'>
    </div>
</template>

<script>

import dragVerify from 'vue-drag-verify';

    export default{
        data() {
            return {
                username:'',
                password:'',
                width:300,
                height:40,
                text:'将滑块拖动至最右侧',
                src:'http://localhost:8000/static/dingding.png'
            }
        },
        components:{
            dragVerify:dragVerify,
        },
        methods: {
            //提交
            submit:function(){
                this.axios.get('http://127.0.0.1:8000/login_week/',{params:{
                    username:this.username,password:this.password
                }}).then((result)=>{
                    console.log('登录成功')

                    alert(result.data.message)
                })

            },
            //钉钉登录
            ding:function(){
                var appid = 'dingoaukgkwqknzjvamdqh'
                var redirect_uri = 'http://localhost:8000/dingding_back/'

                var url='https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri

                window.location.href = url;
            }
        },

    }
</script>

<style>

</style>